<template>
    <div class ='wrapper-detail'>
        <list class="scroller" offset-accuracy="50px">
            <refresher @refresh="loadingDown"></refresher>
            <cell >
                <div class="comment">
                    <div class="comm-top">
                        <div class="ct-l">
                            <image :src='question.workerAvatar' class='cm-pho'></image>
                            <text class='cm-name'>{{question.workerName}}</text>
                        </div>
                        <text class='ct-r'>{{question.publishTime}}</text>
                    </div>
                    <div class="cm-desc"><text>{{question.content}}</text></div>
                    <!-- <text>{{question.picUrls}}</text> -->
                    <div class='itemPics'>
                        <image class='itemPic' :src='pic' v-for='(pic,i) in question.picUrls' @click="preview(i)"></image>
                    </div>
                </div>
            </cell>
            <cell>
                <text class='total'>全部回答（{{count}}）</text>
            </cell>
            <cell v-for="item in articles">
                <comment :data="item"></comment>
            </cell> 
            <cell class="cell-button no-order" v-if="articles.length <= 0">
                <image src="bmlocal://assets/acw/wuwangluo.png" class="noOrderImg"></image>
                <text class="noOrderTxt">暂无交流记录</text>
            </cell>
            <loading class="comm-loading" @loading="onloading" :display="showLoading">
                <loading-indicator class="comm-indicator"></loading-indicator>
                <text class="comm-indicator-text">加载中 ...</text>
            </loading>
        </list>
        <div class="write-comm">
            <input type="text" placeholder="写评论" class="comm-input" :autofocus=false v-model="content"/>
            <div class="btn-send">
                <text class='btn-send-text' @click="send">发送</text>
            </div>
        </div>
    </div>
</template>
<script>
    const modal = weex.requireModule('modal');
    import refresher from '../common/refresh';
    import comment from '../common/comment';
    export default {
        data () {
            return {
                content:'',
                question:{
                    publishTime:'',
                    content:''
                },
                showLoading: 'hide',
                token: '',
                pageNum: 1,
                pageSize: 10,
                count: 0,
                statusHeight: Number.parseInt(this.statusBarHeight || weex.config.env.statusBarHeight || 40),
               defPho:'',
               articles:[]
            }
        },
        created(){
            var vm = this;
            this.$router.getParams().then(resData => {
                vm.id = resData.id;
                // modal.alert({
                //                 message: 11111,     // 弹窗内容
                //                 okTitle: '确定',            // 确定按钮文字
                //                 title:'标题'                // title
                //             }, function(){
                //                 // 点击按钮的回调
                //             })
                
                // modal.alert({
                //                 message: vm.id,     // 弹窗内容
                //                 okTitle: '确定',            // 确定按钮文字
                //                 title:'标题'                // title
                //             }, function(){
                //                 // 点击按钮的回调
                //             })
                vm.getQueData(vm.id);
                vm.getAnswerList(vm.id);
            })
            // vm.getQueData(id);
        },
        components: {  
            'refresher': refresher,
            comment
        },
        methods: {
            // getQuest(id){
            //     modal.alert({
            //                     message: id,     // 弹窗内容
            //                     okTitle: '确定',            // 确定按钮文字
            //                     title:'标题'                // title
            //                 }, function(){
            //                     // 点击按钮的回调
            //                 })
            // },
            preview(i){
                this.$image.preview({
                    index: i,                     // 所点击图片下标
                    images: this.question.picUrls,        // 图片的网络地址
                })
            },

            getQueData(id) {
                // modal.alert({
                //                 message: id,     // 弹窗内容
                //                 okTitle: '确定',            // 确定按钮文字
                //                 title:'标题'                // title
                //             }, function(){
                //                 // 点击按钮的回调
                //             })
                //获取石头币明细接口
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');


                this.token = userInfo.token;
                
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'question.detail', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "id": id,
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                    console.log(resData)
                    // modal.alert({
                    //             message: resData,     // 弹窗内容
                    //             okTitle: '确定',            // 确定按钮文字
                    //             title:'标题'                // title
                    //         }, function(){
                    //             // 点击按钮的回调
                    //         })
                    if(resData && resData.errno == 0){
                        vm.question.content = resData.data.content;
                        vm.question.publishTime = resData.data.publishTime;
                        vm.question.workerName = resData.data.workerName;
                        vm.question.workerAvatar = resData.data.workerAvatar;
                        vm.question.picUrls = resData.data.picUrls;
                    } else if(resData && resData.errno == 501){
                        
                        vm.backLogin()
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                }, error => {
                    // 错误回调
                    
                    console.log(error)
                    this.$notice.toast({ message: "获取失败, 请重试"})
                })
            },
            getAnswerList(id) {
                //获取石头币明细接口
                let vm = this;
                var userInfo = this.$storage.getSync('UserInfo');


                this.token = userInfo.token;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'question.answerList', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "pageNum": this.pageNum,
                        "pageSize": this.pageSize,
                        "questionId": id
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        if(vm.pageNum == 1){
                            console.log("===================1")
                            this.articles = [];
                            
                            // modal.alert({
                            //     message: resData.data,     // 弹窗内容
                            //     okTitle: '确定',            // 确定按钮文字
                            //     title:'标题'                // title
                            // }, function(){
                            //     // 点击按钮的回调
                            // })


                            // resData.data.list.push({
                            //     '201902':[
                            //         {total: "300.00", recordType: "注11册"}
                            //     ]
                            // })
                            resData.data.items.forEach((item, i) => {
                                this.articles.push(item)
                            });
                            vm.count = resData.data.total;
                            // vm.$notice.loading.hide();
                            // vm.showLoading = 'hide'
                        } else {
                            // console.log("===================2")
                            setTimeout(() => {
                                vm.$notice.loading.hide();
                                resData.data.items.forEach((item, i) => {
                                    this.articles.push(item)
                                });
                                vm.showLoading = 'hide'
                            }, 500)
                            
                        }
                    } else if(resData && resData.errno == 501){
                        setTimeout(() => {
                            vm.$notice.loading.hide();
                            vm.showLoading = 'hide'
                        }, 500)
                        vm.backLogin()
                    } else {
                        this.$notice.toast({ message: resData.errmsg})
                    }
                }, error => {
                    // 错误回调
                    setTimeout(() => {
                        vm.$notice.loading.hide();
                        vm.showLoading = 'hide'
                    }, 500)
                    console.log(error)
                    this.$notice.toast({ message: "获取失败, 请重试"})
                })
            },
            loadingDown() {
                this.pageNum = 1;
                this.getAnswerList()
            },
            onloading (event) {
                this.pageNum = this.pageNum + 1;
                console.log("============== :" + this.pageNum);
                // setTimeout(() => {
                //     this.$notice.loading.hide()
                //     this.goods3.push(...this.goods1);
                //     this.showLoading = 'hide'
                // }, 600)
                let page = Math.ceil(this.count/this.pageSize);
                if(this.pageNum <= page) {
                    this.$notice.loading.show();
                    this.showLoading = 'show';
                    this.getAnswerList()
                } else {
                    this.$notice.loading.show();
                    this.showLoading = 'show';
                    setTimeout(() => {
                        this.$notice.loading.hide();
                        this.showLoading = 'hide'
                    }, 600)
                    
                }
            },
            send() {
                let vm = this;
                if(vm.content == ''){
                    this.$notice.toast({ message: '请输入文字后评论'})
                    return;
                }
                //获取石头币明细接口
                var userInfo = this.$storage.getSync('UserInfo');

                this.token = userInfo.token;
                this.$fetch({
                    method: 'POST',    // 大写
                    name: 'question.answer', //当前是在apis中配置的别名，你也可以直接绝对路径请求 如：url:http://xx.xx.com/xxx/xxx
                    data: {
                        "content": vm.content,
                        "questionId": vm.id
                    },
                    header: {
                        'X-TMACW-APP-Token': this.token
                    }
                }).then(resData => {
                    // 成功回调
                    console.log(":::::::::::::::消息列表::::::::::::::::::::::")
                    console.log(resData)
                    if(resData && resData.errno == 0){
                        vm.$notice.toast({ message: '评论成功'})
                        vm.content = ''
                        vm.$tools.resignKeyboard().then(resData => {
                            // 收起成功的回调
                        }, error => {})
                        vm.getAnswerList(vm.id);
                    } else if(resData && resData.errno == 501){
                        vm.backLogin()
                    } else {
                        
                        this.$notice.toast({ message: resData.errmsg})
                    }
                }, error => {
                    
                    console.log(error)
                    this.$notice.toast({ message: "获取失败, 请重试"})
                })
            },
            backLogin () {
                this.$storage.setSync('LoginStatus', 'false')
                this.$storage.setSync('UserInfo', {})
                this.$router.open({
                    name: 'acw.home.login',
                    type: 'PUSH',
                    canBack: false,
                })
            }
        }
    }
</script>
<style lang="scss" src='./index.scss'></style>